<template>
    <!--地图挂载dom-->
    <div id="map">
        <div id="info" ref="info"></div>
    </div>
</template>

<script>
    //引入依赖
    import Map from 'ol/Map';
    import View from 'ol/View';
    import VectorTileLayer from 'ol/layer/VectorTile';
    import VectorTileSource from 'ol/source/VectorTile';
    import MVT from 'ol/format/MVT';
    export default {
        name: "VectorTileLayer",
        data() {
            return {

            }
        },
        mounted() {
            //实例化Map对象加载地图
            var map = new Map({
                layers: [
                    //添加矢量瓦片类型图层
                    new VectorTileLayer({
                        source: new VectorTileSource({
                            //设置矢量瓦片类型资源
                            format: new MVT(),
                            url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf',
                        }),
                    })
                ],
                target: 'map',
                view: new View({
                    center: [0, 0],
                    zoom: 2
                })
            });
            map.on('pointermove', showInfo);

            const info = this.$refs.info;
            function showInfo(event) {
                //获取到鼠标当前像素所获取到的要素
                const features = map.getFeaturesAtPixel(event.pixel);
                if (features.length == 0) {
                    info.innerText = '';
                    info.style.opacity = 0;
                    return;
                }
                console.log(features);
                const properties = features[0].getProperties();
                info.innerText = JSON.stringify(properties, null, 2);
                info.style.opacity = 1;
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
    #info{
        position: absolute;
        top: 50px;
        right: 50px;
        color: red;
    }
</style>